<template>
	<view class="container">
		<view class="order-info-container">
			<view class="player-info-card">
				<view class="head-img" :style="{ backgroundImage: 'url( ' + playorder_headImg + ' )' }"></view>
				<view>
					<view class="player-name">{{ playorder_serveName }}</view>
					<view class="user-id">(ID:{{ playorder_serveNumber }})</view>
				</view>
			</view>
			<view class="order-container">
				<view>
					<view class="list-item">
						<text class="list-item-title">预约时间</text>
						<!-- <picker mode="date" :value="date" :start="startDate" @change="bindAppointmentTimeChange">
							<view v-if="orderInfo.AppointmentTime">{{ orderInfo.AppointmentTime }}</view>
							<view v-else class="choose-tips-text">请选择预约时间</view>
						</picker> -->
						<timeSelector showType="yearToMinute" @btnConfirm="bindAppointmentTimeChange" :beginDate="startDate">
							<view v-if="orderInfo.AppointmentTime">{{ orderInfo.AppointmentTime }}</view>
							<view v-else class="choose-tips-text">请选择预约时间</view>
						</timeSelector>
						<image class="list-item-arrow" src="../../../static/images/right@3x.png"></image>
					</view>
					<view class="list-item">
						<text class="list-item-title">游&#12288;戏</text>
						<picker class="list-item-content" @change="bindPickerChange" :value="TagName" range-key="TagName" :range="tagList">
							<view v-if="orderInfo.TagName">{{ orderInfo.TagName }}</view>
							<view v-else class="choose-tips-text">{{ tagNameTips }}</view>
						</picker>
						<image class="list-item-arrow" src="../../../static/images/right@3x.png"></image>
					</view>
					<view class="list-item">
						<text class="list-item-title">价&#12288;格</text>
						<text class="list-item-content orange">
							¥ {{ playorder_servehourlyWage }}
							<text class="unit">{{ playorder_servehourlyWageTypeStr }}</text>
						</text>
					</view>
					<view class="list-item">
						<text class="list-item-title">小&#12288;时</text>
						<view class="">
							<view class="add-car">
								<view class="sub-icon" @click="addAppointmentCount(0)">-</view>
								<input maxlength="5" type="number" v-model="orderInfo.AppointmentCount" class="add-input" @blur="appointmentCountChange" min="1" />
								<view class="add-icon" @click="addAppointmentCount(1)">+</view>
							</view>
						</view>
					</view>

					<!-- <view class="list-item">
						<text class="list-item-title">优惠券</text>
						<text class="list-item-content choose-tips-text" @click="choosecoupon">点击选择优惠券</text>
						<image class="list-item-arrow" src="../../../static/images/right@3x.png"></image>
					</view> -->
					<view class="list-item">
						<text class="list-item-title">应&#12288;付</text>
						<text class="list-item-content money">¥ {{ totalMoney | initMoney }}</text>
					</view>
					<view class="list-item">
						<text class="list-item-title">实付金额</text>
						<text class="list-item-content money">¥ {{ (totalMoney - orderInfo.CouponAmount) | initMoney }}</text>
					</view>
					<view>
						<text class="list-item-title remark">备&#12288;注</text>
						<textarea class="text-area" v-model="orderInfo.Remark" placeholder="填写对大神的要求~" placeholder-class="sa-input-placeholder"></textarea>
					</view>
				</view>
			</view>
		</view>
		<view class="confirm-btn bottom-change-view" @click="submitOnlineServePlayOrder()">提交订单</view>
		<!-- <uni-popup ref="popup" type="bottom">
			<customer-coupon
				:customerCouponList="customerCouponList"
				:totalMoney="totalMoney"
				@cancelBtn="cancelBtn"
				@confirmSelectedCoupon="confirmSelectedCoupon"
				@clickCouponItem="clickCouponItem"
			></customer-coupon>
		</uni-popup> -->
	</view>
</template>

<script>
// import uniPopup from '@/components/uni-popup/uni-popup.vue';
// import customerCoupon from '@/packagePages/player/placeorder/customerCoupon/index.vue';
import { getServePlayCustomerCoupons } from '@/constant/customer.js';
import { getOrderEndTime, successToShow, errorToShow, deepCopy, formatDate } from '@/config/common.js';
import timeSelector from '@/components/wing-time-selector/wing-time-selector.vue';
import { submitOnlineOrder, getServeTagByServerId } from '@/constant/onlineServe.js';

export default {
	components: {
		timeSelector
		// uniPopup,
		// customerCoupon
	},
	filters: {
		initMoney(value) {
			if (!value) {
				return '0.00';
			}
			return value.toFixed(2);
		}
	},
	data() {
		return {
			shopIndex: 0,
			tagList: [],
			begintime: '',
			endtime: '',
			hours: 0,
			totalMoney: 0,
			playorder_headImg: '',
			playorder_serveName: '',
			playorder_serveNumber: '',
			playorder_servehourlyWage: '',
			playorder_servehourlyWageTypeStr: '',
			tagNameTips: '请选择游戏',
			customerCouponList: [],
			startDate: formatDate(new Date(), 'yyyy-MM-dd hh:mm'),
			requestCustomerCouponList: [],
			orderInfo: {
				CustomerId: uni.getStorageSync('customerId'),
				ServePlayerId: '',
				AppointmentTime: '',
				AppointmentCount: 1,
				TagId: '',
				PayType: 10,
				Remark: '',
				CustomerCouponIds: [],
				CouponAmount: 0,
				TagName: ''
			}
		};
	},
	onLoad: function(option) {
		this.orderInfo.ServePlayerId = uni.getStorageSync('online_playorder_serverId');
		this.playorder_headImg = uni.getStorageSync('online_playorder_headImg');
		this.playorder_serveName = uni.getStorageSync('online_playorder_serveName');
		this.playorder_serveNumber = uni.getStorageSync('online_playorder_serveNumber');
		this.playorder_servehourlyWage = uni.getStorageSync('online_playorder_servehourlyWage');
		this.playorder_servehourlyWageTypeStr = uni.getStorageSync('online_playorder_servehourlyWageUnit');
		this.getTotalMoney();
		this.getServeTagByServerId();
	},
	methods: {
		async submitOnlineServePlayOrder() {
			if (this.totalMoney == 0) {
				errorToShow('订单金额必须大于0');
				return;
			}
			if (!this.orderInfo.AppointmentTime) {
				errorToShow('请选择预约时间');
				return;
			}
			if (!this.orderInfo.TagId) {
				errorToShow('请选择游戏');
				return;
			}
			if (!this.orderInfo.AppointmentCount) {
				errorToShow('请选择预约小时数');
				return;
			}
			let result = await submitOnlineOrder(this.orderInfo);
			successToShow('订单提交成功', res => {
				let orderAmount = this.totalMoney - this.orderInfo.CouponAmount;
				uni.reLaunch({
					url: '/pages/payorder/index?orderNo=' + result + '&orderType=90' + '&orderAmount=' + orderAmount
				});
			});
		},
		async choosecoupon() {
			// let result = await this.getServePlayCustomerCoupons();
			// if (!result) {
			// 	return;
			// }
			// this.$refs.popup.open();
		},
		async getServeTagByServerId() {
			const result = await getServeTagByServerId({ servePlayerId: this.orderInfo.ServePlayerId });
			this.tagList = result;
		},
		cancelBtn() {
			this.$refs.popup.close();
		},
		clickCouponItem(item) {
			this.customerCouponList = [];
			let groupList = this.requestCustomerCouponList;
			this.requestCustomerCouponList.forEach(r => {
				if (r.Id == item.Id) {
					r.IsActive = !item.IsActive;
				}
				this.customerCouponList.push(r);
			});
			const selectedCouponList = groupList.filter(item => item.IsActive);
			let totalCouponAmount = selectedCouponList.reduce((total, item) => {
				return total + item.Amount;
			}, 0);
			const result = this.checkCouponAmount(totalCouponAmount);
			if (!result) {
				totalCouponAmount = totalCouponAmount - item.Amount;
				let _that = this;
				errorToShow(
					'优惠券金额不能大于订单金额',
					function() {
						_that.customerCouponList.find(r => r.Id == item.Id).IsActive = false;
					},
					200
				);
			}
		},
		checkCouponAmount(totalCouponAmount) {
			const totalAmount = this.totalMoney;
			if (totalCouponAmount >= totalAmount) {
				return false;
			}
			return true;
		},
		confirmSelectedCoupon(selectedCouponList) {
			this.orderInfo.CouponAmount = selectedCouponList.reduce((total, item) => {
				return total + item.Amount;
			}, 0);
			this.orderInfo.CustomerCouponIds = [];
			selectedCouponList.forEach(item => {
				this.orderInfo.CustomerCouponIds.push(item.Id);
			});
			this.cancelBtn();
		},
		// async getServePlayCustomerCoupons() {
		// 	this.customerCouponList = await getServePlayCustomerCoupons({ Fee: this.totalMoney });
		// 	if (this.customerCouponList.length == 0) {
		// 		errorToShow('无可用优惠券');
		// 		return false;
		// 	}
		// 	if (this.orderInfo.CustomerCouponIds.length > 0) {
		// 		this.orderInfo.CustomerCouponIds.forEach(r => {
		// 			let couponItem = this.customerCouponList.find(item => item.Id == r);
		// 			if (couponItem) {
		// 				couponItem.IsActive = true;
		// 			}
		// 		});
		// 	}
		// 	this.requestCustomerCouponList = [];
		// 	this.customerCouponList.forEach(item => {
		// 		this.requestCustomerCouponList.push(item);
		// 	});
		// 	return true;
		// },
		appointmentCountChange(e) {
			if (e.target.value < 1) {
				e.target.value = 1;
			}
			this.orderInfo.AppointmentCount = e.target.value;
			this.getTotalMoney();
		},
		addAppointmentCount(val) {
			if (val == 0) {
				if (this.orderInfo.AppointmentCount == 1) {
					return;
				}
				this.orderInfo.AppointmentCount = this.orderInfo.AppointmentCount - 0.5;
			} else {
				this.orderInfo.AppointmentCount = this.orderInfo.AppointmentCount + 0.5;
			}
			this.getTotalMoney();
		},
		getTotalMoney() {
			if (this.orderInfo.AppointmentCount < 1) {
				return;
			}
			this.totalMoney = this.orderInfo.AppointmentCount * this.playorder_servehourlyWage;
		},
		bindPickerChange(e) {
			this.shopIndex = e.target.value;
			this.orderInfo.TagName = this.tagList[this.shopIndex].TagName;
			this.orderInfo.TagId = this.tagList[this.shopIndex].Id;
		},
		bindAppointmentTimeChange(e) {
			this.orderInfo.AppointmentTime = e.key;
		}
	}
};
</script>

<style scoped lang="scss">
.order-info-container {
	padding: 20rpx 30rpx;
	font-family: 'SourceHanSansCN-Regular';
	color: $main-text-color-gray-33;
	padding-bottom: 140rpx;
}
.player-info-card {
	display: flex;
	align-items: center;
	margin-bottom: 12rpx;
	.player-name {
		font-size: $main-text-size-32;
		font-family: 'SourceHanSansCN-Medium';
	}
}

.referrer-input {
	width: 550rpx;
	text-align: right;
}
.content {
	overflow-y: auto;
}
.list-item {
	min-height: 100rpx;
	border-bottom: 2rpx solid $main-line-color-gray-DE;
	display: flex;
	align-items: center;
	&-title {
		margin-right: auto;
		font-size: $main-text-size-32;
	}
	&-content {
		width: 540rpx;
		text-align: right;
		color: #222222;
	}
	&-arrow {
		width: 16rpx;
		height: 28rpx;
		margin-left: 10rpx;
	}
}
.head-img {
	width: 160rpx;
	height: 160rpx;
	border-radius: 20rpx;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	margin-right: 20rpx;
}
.user-id {
	font-size: $main-text-size-28;
	color: $main-text-color-grey;
	margin-top: 20rpx;
}
.date {
	color: $main-text-color-gray-33;
	font-size: $main-text-size-20;
}
.list-hour {
	font-size: $main-text-size-28;
	margin-left: 10rpx;
}
.orange {
	color: $main-text-color-main-orange;
	font-size: $main-text-size-32;

	.unit {
		font-size: $main-text-size-28;
	}
}

.money {
	color: $main-text-color-main-orange;
	font-size: $main-text-size-28;
}
.remark {
	margin-top: 28rpx;
	display: block;
	margin-bottom: 20rpx;
}
.text-area {
	border: 2rpx dashed #dbdbdb;
	height: 160rpx;
	width: calc(100% - 50rpx);
	font-size: $main-text-size-28;
	padding: 20rpx;
}
.confirm-btn {
	position: fixed;
	bottom: 0;
	background-color: $main-theme-color-green;
	font-size: 30rpx;
	color: #fff;
	width: 100vw;
	line-height: 120rpx;
	height: 120rpx;
	display: flex;
	justify-content: center;
	align-items: center;
}
.order-container {
	// height: calc(100vh - 315rpx);
	overflow: hidden;
}
.uni-popup-coupon {
	background-color: #fff;
	width: 100%;
	height: 100%;
}

/deep/ .sa-input-placeholder {
	color: $main-text-color-grey;
	font-size: $main-text-size-28;
}

.choose-tips-text {
	color: $main-text-color-gray-black;
	font-size: $main-text-size-28;
}

.add-car {
	display: flex;
	align-items: center;
	border: 2rpx solid $main-line-color-gray;
	.sub-icon {
		width: 50rpx;
		text-align: center;
		height: 100%;
		line-height: 56rpx;
		border-right: 2rpx solid $main-line-color-gray;
	}

	.add-icon {
		width: 50rpx;
		text-align: center;
		height: 100%;
		line-height: 56rpx;
		border-left: 2rpx solid $main-line-color-gray;
	}

	.add-input {
		width: 78rpx;
		text-align: center;
	}
}
</style>
